<template>
    <div class="list-one">
        <h1>list one</h1>
        <ul>
            <li v-for="(product, index) in productList" :key=index>
                <p>名称：{{product.name}}</p>
                <p>价格：{{product.price}}</p>
            </li>
        </ul>
        <button @click="reducePrice(10)">降价</button>
        <button>异步降价</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                // productList: this.$store.state.productList // 获取store.js > state > productList
                productList: this.$store.getters.getSaledPrice
            }
        },
        methods: {
            reducePrice(a) {
                this.$store.commit('reducePrice', a)
            }
        },
        mounted(){
            console.log("listOne.vue mounted",this.isQA);
        }
    }
</script>
<style scoped>
    h1,
    h2 {
        font-weight: normal;
    }

    .list-one {
        margin: 5px;
        padding: 8px;
        background: rgb(236, 199, 199);
    }

    ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        list-style-type: none;
        padding: 5px;
    }

    li {
        cursor: pointer;
        margin: 5px;
        width: 100%;
        flex: 1;
        text-align: center;
        color: #fff;
        background: rgb(107, 179, 207);
    }

    button {
        padding: 5px 15px;
        border: none;
        font-size: 14px;
    }
</style>